<template>
    <div class="order-wrapper" v-bind:style="{paddingTop: height + 'px'}">
        <transition name="slide-fade">
        <div class="push-wrapper" v-if="isShowPush" ref="push">
            <push :order="this.data" @refresh="getDetail" :pushs="this.pushes"></push>
        </div>
        </transition>
        <div class="basic-info-wrapper">
            <div class="inner-info">
                <div class="header">
                    <h3>一、基本信息</h3>
                    <div v-if="user_id == data.dispatch_id" :style="{marginRight: '18px'}">
                        <a-button type="primary" @click="showCancelOrder" v-if="[2].includes(data.status_id) && !data.recoverorder">申请取消订单</a-button>
                        <a-button type="primary" @click="showRecoverOrder = true" v-if="data.recoverorder">恢复此订单</a-button>
                        <a-button type="primary" v-if="!remarkChange && data.status === '订单待审核'" @click="remarkChange = true" :style="{marginLeft: '10px'}">修改</a-button>
                        <a-button type="primary" v-if="remarkChange" @click="returned" >还原默认</a-button>
                        <a-button type="primary" v-if="remarkChange" @click="changeOrderRemark" :style="{marginLeft: '10px'}">保存</a-button>
                    </div>
                </div>
                <div id="update-form" :class="{active: isActive}">
                    <div class="form-main-content">
                        <a-form :form="form_info">

                            <a-row :gutter="10">
                                <a-col key="1" :span="8" class="form-item">
                                    <a-form-item label="订单编号">
                                        {{data.sn}}
                                    </a-form-item>
                                </a-col>
                                <a-col key="2" :span="8" class="form-item">
                                    <a-form-item label="订单名称">
                                        {{data.name}}
                                    </a-form-item>
                                </a-col>
                                <a-col key="3" :span="8" class="form-item">
                                    <a-form-item label="订单状态">
                                        {{data.status}}
                                    </a-form-item>
                                </a-col>
                                <a-col key="4" :span="8" class="form-item">
                                    <a-form-item label="服务类型">
                                        {{data.type}}
                                    </a-form-item>
                                </a-col>
                                <a-col key="5" :span="8" class="form-item">
                                    <a-form-item label="是否紧急">
                                        <div v-if="data.is_urgent === '紧急'" :style="{color: '#FF5151'}">{{data.is_urgent}}
                                        </div>
                                        <div v-else>{{data.is_urgent}}</div>
                                    </a-form-item>
                                </a-col>
                                <!-- <a-col key="6" :span="8" class="form-item">
                                    <a-form-item label="是否实时监控">
                                        {{data.is_monitor}}
                                    </a-form-item>
                                </a-col> -->
                                <a-col key="7" :span="8" class="form-item">
                                    <a-form-item label="服务号">
                                        {{data.service_sn}}
                                    </a-form-item>
                                </a-col>
                                <a-col key="8" :span="8" class="form-item">
                                    <a-form-item label="服务号名称">
                                        {{data.service_name}}
                                    </a-form-item>
                                </a-col>
                                <a-col key="9" :span="8" class="form-item">
                                    <a-form-item label="服务号余额">
                                        <div v-if="data.service_amount < 1000" :style="{color: '#FF5151'}">
                                            {{data.service_amount}}
                                        </div>
                                        <div v-else>{{data.service_amount}}</div>
                                    </a-form-item>
                                </a-col>
                                <a-col key="10" :span="8" class="form-item">
                                    <a-form-item label="账号">
                                        {{data.service_username}}
                                    </a-form-item>
                                </a-col>
                                <a-col key="11" :span="8" class="form-item">
                                    <a-form-item label="账号名称">
                                        {{data.service_account}}
                                    </a-form-item>
                                </a-col>
                                <a-col key="12" :span="8" class="form-item">
                                    <a-form-item label="账号余额">
                                        <div v-if="data.user_amount < 1000" :style="{color: '#FF5151'}">
                                            {{data.user_amount}}
                                        </div>
                                        <div v-else>{{data.user_amount}}</div>
                                    </a-form-item>
                                </a-col>
                                <a-col key="request" :span="24" class="form-item">
                                    <a-form-item label="服务要求">
                                        {{data.request}}
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="10">
                                <a-col key="charge_method" :span="8" class="form-item">
                                    <a-form-item label="计费方式">
                                        {{data.charge_method}}
                                    </a-form-item>
                                </a-col>
                                <a-col key="charge" :span="8" class="form-item">
                                    <a-form-item label="计费">
                                        {{data.total}}积分({{parseFloat(data.total - data.urgent_fee).toFixed(2)}}积分服务费 + {{data.urgent_fee}}积分加急费）
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="10">
                                <a-col key="remark" :span="24" class="form-item">
                                    <a-form-item label="订单备注">
                                        <p v-if="!remarkChange">{{data.remark ? data.remark : '无'}}</p>
                                        <a-textarea v-decorator="['remark', { initialValue: data.remark }]" :style="{height: '60px'}" placeholder="请输入备注"  :rows="3" v-if="remarkChange"></a-textarea>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-button type="primary" @click="isActive = !isActive">
                                更多信息<img src="../../assets/images/more-down.svg" class="more-info-img"
                                        :class="{active: isActive}" alt="">
                            </a-button>
                        </a-form>

                        <div class="extra-info" :class="{active: isActive}">
                            <a-form :form="form" class="extra-info-form">
                                <a-row :gutter="10">
                                    <a-col key="service_contact" :span="8" class="form-item">
                                        <a-form-item label="客户联系人">
                                            {{data.service_contact}}
                                        </a-form-item>
                                    </a-col>
                                    <a-col key="service_mobile" :span="8" class="form-item">
                                        <a-form-item label="客户联系方式">
                                            {{data.service_mobile}}
                                        </a-form-item>
                                    </a-col>
                                    <a-col key="service_address" :span="8" class="form-item">
                                        <a-form-item label="联系地址">
                                            {{data.service_address}}
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="10">
                                    <a-col key="sale" :span="8" class="form-item">
                                        <a-form-item label="相关销售">
                                            {{data.sale}}
                                        </a-form-item>
                                    </a-col>
                                    <a-col key="sale_mobile" :span="8" class="form-item">
                                        <a-form-item label="销售联系方式">
                                            {{data.sale_mobile}}
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="10">
                                    <a-col key="dispatch" :span="8" class="form-item">
                                        <a-form-item label="相关调度">
                                            {{data.dispatch}}
                                        </a-form-item>
                                    </a-col>
                                    <a-col key="dispatch_mobile" :span="8" class="form-item">
                                        <a-form-item label="调度联系方式">
                                            {{data.dispatch_mobile}}
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="10">
                                    <a-col key="finance" :span="8" class="form-item">
                                        <a-form-item label="相关财务">
                                            {{data.finance}}
                                        </a-form-item>
                                    </a-col>
                                    <a-col key="finance_mobile" :span="8" class="form-item">
                                        <a-form-item label="财务联系方式">
                                            {{data.finance_mobile}}
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="10">
                                    <a-col key="trip" :span="8" class="form-item">
                                        <a-form-item label="出行方式">
                                            {{data.trip}}
                                        </a-form-item>
                                    </a-col>
                                    <a-col key="transport_name" :span="8" class="form-item">
                                        <a-form-item label="前往现场方式">
                                            <div v-if="disabled">{{data.transport_name}}</div>
                                            <a-select
                                                    v-decorator="['transport_id',{initialValue:'1'},{rules: [{ required: true, message: '请选择' }]}]"
                                                    @change="tpChange" placeholder="请选择" style="width:100px"
                                                    v-if="!disabled">
                                                <a-select-option v-for="(v,k) in transports" :key="k" :value="k">
                                                    {{v}}
                                                </a-select-option>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                    <!-- <a-col key="plate_number" :span="8" class="form-item">
                                        <a-form-item label="车牌号码" v-if="data.transport_id==1">
                                            <div v-if="disabled">{{data.plate_number}}</div>
                                            <a-input style="width:150px" maxlength="50" placeholder="请输入车牌号码" v-decorator="[
                                                'plate_number',
                                                {
                                                    rules: [{ required: true, message: '请输入车牌号码' }]
                                                }
                                            ]" v-if="!disabled"/>
                                        </a-form-item>
                                    </a-col> -->
                                </a-row>
                                <a-row :gutter="10">
                                    <a-col key="stay" :span="8" class="form-item">
                                        <a-form-item label="住宿方式">
                                            {{data.stay}}
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <!-- <div class="change-more-information">
                                    <a-button v-if="disabled && user_id == data.dispatch_id" @click="edit" type="primary">修改</a-button>
                                    <a-button v-if="!disabled" type="primary" @click="transportSubmit">保存</a-button>
                                </div> -->
                            </a-form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="report-info-wrapper">
            <div class="inner-info">
                <div class="header">
                    <h3>二、报告管理</h3>
                </div>
                <Report :order_id="id" :dispatch_id="data.dispatch_id" ref="report"></Report>
            </div>
        </div> -->
        <div class="address-info-wrapper">
            <div class="inner-info">
                <div class="header">
                    <h3>二、地址信息</h3>
                    <div>
                        <a-button type="primary" v-if="data.status_id == 6 && !addressedit" @click="editAddressDescription">修改</a-button>
                        <a-button type="primary" v-if="addressedit" @click="returnedAddressForm" >还原默认</a-button>
                        <a-button type="primary" v-if="addressedit" @click="onSubmit(addressForm)" :style="{marginLeft: '10px'}">保存</a-button>
                    </div>
                </div>
                <div class="form-main-content">
                    <a-form :form="form_address">
                    <a-row :gutter="10">
                        <a-col key="address" :span="24">
                            <div class="address-a">
                                <div class="textarea-desc">
                                    <span class="prefix-name">飞行地址：</span>
                                    <div>
                                        <!-- <a-textarea rows="3" v-model="addressForm.address" v-if="addressedit"/> -->
                                        <a-form-item label="" v-if="addressedit" style="width: 100%; margin-bottom:0;">
                                            <a-textarea rows="3" v-decorator="['address', { initialValue: addressForm.address }]" />
                                        </a-form-item>
                                        <i v-else>{{data.address}}</i>
                                        <img class="address-show" v-if="!addressedit && data.lng_lat" @click="showAddress" src="./../../assets/images/site.svg" alt="">
                                    </div>
                                </div>
                                <div>
                                    <a-button @click="showMap()" type="primary" v-if="addressedit"  style="width: 80px; height: 32px; margin-left: 74px;">{{data.type_id === 4 ? '描点' : data.type_id === 3 ? '圈选' : '划线'}}</a-button>
                                    <a-modal v-model="showmap" title="圈选" :footer="null"
                                            class="fly-address-modal"
                                            centered
                                            width="800"
                                            :keyboard='false'
                                            :maskClosable='false'>
                                        <maps :lnglat="data.lng_lat" :typeId="data.type_id" @setArea="getArea" @setLnglat="getLnglat" @setLength="getLength"
                                            @setLocations="getLocations"></maps>
                                    </a-modal>
                                </div>
                                <!-- <div :style="{display: 'flex', alignItems: 'baseline'}"> -->
                                <div :style="{display: 'flex', alignItems: 'center'}">
                                    <div v-if="data.type_id == 5" :style="{display: 'flex', alignItems: 'center'}">
                                        <span class="prefix-name">预计长度：</span>
                                        <!-- <a-input style="width:100px" v-if="addressedit && data.type_id == 5" @change="calcRiverArea" v-model="river_length"/> -->
                                        <a-form-item label="" v-if="addressedit && data.type_id == 5" style="display:inline-block; width:100px; margin-bottom:0;}">
                                            <a-input v-decorator="['river_length', { initialValue: river_length }]" @change="onChangeArea" />
                                        </a-form-item>
                                        <p v-if="!addressedit">{{getRiverLength}}</p>
                                        <span :style="{marginLeft: '5px'}">公里</span>
                                    </div>
                                    <div v-if="data.type_id == 5" :style="{display: 'flex', alignItems: 'center', marginLeft: '15px'}">
                                        <span class="prefix-name">河道宽度：</span>
                                        <!-- <a-select :style="{width: '150px'}" @change="calcRiverArea" v-model="addressForm.river_width_index" v-if="addressedit && data.type_id == 5">
                                            <a-select-option value="1">100米以内</a-select-option>
                                            <a-select-option value="2">100米-400米</a-select-option>
                                            <a-select-option value="3">400米-700米</a-select-option>
                                            <a-select-option value="4">700米-1000米</a-select-option>
                                            <a-select-option value="5">1000米-1300米</a-select-option>
                                            <a-select-option value="6">1300米-1600米</a-select-option>
                                            <a-select-option value="7">1600米-1900米</a-select-option>
                                            <a-select-option value="8">1900米-2100米</a-select-option>
                                            <a-select-option value="9">2100米以上</a-select-option>
                                        </a-select> -->
                                        <a-form-item label="" v-if="addressedit && data.type_id == 5" style="display:inline-block; width:150px; margin-bottom:0;}">
                                            <a-select :style="{width: '150px'}" @change="onChangeArea" v-decorator="['river_width_index', { initialValue: addressForm.river_width_index }]">
                                                <a-select-option value="1">100米以内</a-select-option>
                                                <a-select-option value="2">100米-400米</a-select-option>
                                                <a-select-option value="3">400米-700米</a-select-option>
                                                <a-select-option value="4">700米-1000米</a-select-option>
                                                <a-select-option value="5">1000米-1300米</a-select-option>
                                                <a-select-option value="6">1300米-1600米</a-select-option>
                                                <a-select-option value="7">1600米-1900米</a-select-option>
                                                <a-select-option value="8">1900米-2100米</a-select-option>
                                                <a-select-option value="9">2100米以上</a-select-option>
                                            </a-select>
                                        </a-form-item>
                                        <span v-if="!addressedit">{{getRiverWidth}}</span>
                                    </div>
                                    <span class="prefix-name" v-if="data.type_id == 3">预计面积：</span>
                                    <span class="prefix-name" v-if="data.type_id == 4">预计点数：</span>
                                    <span class="prefix-name" v-if="data.type_id == 5" :style="{marginLeft: '15px'}">预计面积：</span>
                                    <!-- <div v-if="addressedit && data.type_id !== 5"><a-input style="width:100px" v-model="addressForm.area"/> {{getUnit}}</div> -->
                                    <a-form-item label="" v-if="addressedit && data.type_id !== 5" style="display:inline-block; width:200px; margin-bottom:0;">
                                        <a-input rows="3" v-decorator="['area', { initialValue: addressForm.area }]" style="width:100px;" />
                                        <span class="ant-form-text">{{getUnit}}</span>
                                    </a-form-item>
                                    <span v-else>{{addressForm.area ? parseFloat(addressForm.area) : 0}} {{getUnit}}</span>
                                    <!-- <span v-else>{{form_address.getFieldValue('area') ? parseFloat(form_address.getFieldValue('area')) : 0}} {{getUnit}}</span> -->
                                </div>
                                <!--高德地图-->
                                <a-modal v-model="showaddress" title="飞行地址" :footer="null" class="fly-address-modal"
                                     centered
                                     width="800"
                                     :keyboard = 'false'
                                     :maskClosable = 'false'>
                                    <show-map :type="this.data.type_id" :lnglat="this.data.lng_lat" :address="{address: data.address, area: data.area ? parseFloat(data.area) : 0}"></show-map>
                                </a-modal>
                            </div>
                        </a-col>
                        <a-col :span="24" class="form-item">
                            <span class="relate-image">地图图片：</span>
                            <upload :fileList="data.images === '' ? [] : data.images" @setImages="getImages" v-if="addressedit"></upload>
                            <div v-if="!addressedit && data.images !== ''" class="img-displayed">
                                <img class="img-view" v-for="(v,k) in data.images" :key="k" :src="v.url" @click="handlePreview(v.url)" alt=""/>
                            </div>
                            <!-- <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancelPreview">
                                <img style="width: 100%" :src="previewImage" alt=""/>
                            </a-modal> -->
                            <div v-if="previewVisible" class="shadeTier"></div>
                            <div v-if="previewVisible" class="shadeMap">
                                <div :style="imgStyle" class="popUpImg">
                                    <div class="img">
                                        <div @click="close" class="shut" >
                                            <a-icon type="close" />
                                        </div>
                                        <img :src="previewImage" alt="">
                                    </div>
                                </div>
                            </div>
                        </a-col>
                        <a-col key="ship" :span="24" :style="{display: 'none'}">
                            <div class="address-b">
                                <span class="prefix-name">航线列表：</span>
                                <a-button type="primary"  v-if="user_id == data.dispatch_id" @click="showAddShip" icon="plus">新增航线</a-button>
                            </div>
                            <a-table :columns="shipColumns" :dataSource="shipData" :rowKey="record => record.id" bordered>
                                <template slot="id" slot-scope="text,record,index">{{index+1}}</template>
                                <span slot="status" slot-scope="record">
                                    <a @click="changeAirStatus(record)">{{record.status}}</a>
                                    <a-modal
                                            v-model='shipShow'
                                            title="航线状态"
                                            @ok = 'shipStatus'
                                            width="450px"
                                            :cancelButtonProps="{ props: {type: 'primary'}}"
                                            centered
                                            :keyboard = 'false'
                                            okText = '确认'
                                            :maskClosable = 'false'
                                    >
                                    <div class="confirm-delete-wrapper">
                                        <p>是否{{record.status == '停用' ? '启用' : '停用'}}此航线？</p>
                                    </div>
                                    </a-modal>
                                </span>
                                <span slot="action" slot-scope="text, record" class="operate-column">
                                    <a href="#" @click.prevent="showKmlMapContent(record.file)"><img src="./../../assets/images/view.svg" alt=""></a>
                                    <a :href="record.file"><img src="./../../assets/images/download.svg" alt=""></a>
                                    <a href="#"  v-if="user_id == data.dispatch_id" @click.prevent="delShip(record.id)"><img src="./../../assets/images/delete.svg" alt=""></a>
                                </span>
                            </a-table>
                            <a-modal v-model="showKmlMap" title="KML地图" :footer="null" class="fly-address-modal"
                                     centered
                                     width="800"
                                     :keyboard = 'false'
                                     :maskClosable = 'false'>
                                <kml-map :kml=kml></kml-map>
                            </a-modal>
                            <a-modal
                                    v-model='show_delete'
                                    title='删除航线'
                                    @ok = 'handleDelete'
                                    width="450px"
                                    :cancelButtonProps="{ props: {type: 'primary'}}"
                                    centered
                                    :keyboard = 'false'
                                    okText = '删除'
                                    :maskClosable = 'false'
                            >
                                <div class="confirm-delete-wrapper">
                                    <p>是否删除航线？</p>
                                </div>
                            </a-modal>
                        </a-col>
                    </a-row>
                    </a-form>
                </div>
            </div>
        </div>
        <div class="time-info-wrapper">
            <div class="inner-info">
                <div class="header">
                    <h3>三、时间信息</h3>
                    <div>
                        <a-button type="primary" v-if="data.status_id == 6" @click="periodedit = true">修改</a-button>
                    </div>
                </div>
                <div class="form-main-content">
                    <a-row :gutter="24" :style="{marginBottom: '25px'}">
                        <a-col key="cycle" :span="col_span">
                            <span class="time-label">周期：</span>{{data.cycle}}{{data.cycle_unit}}一次
                        </a-col>
                        <a-col key="cycle_hour" :span="col_span" :style="{paddingLeft: '5px'}">
                            <span class="time-label">采集时间：</span>{{data.cycle_hour}}
                        </a-col>
                        <a-col key="cycle_day" :span="col_span">
                            <div class="constant-time-detail"><span class="time-label">订单持续时间：</span>{{data.cycle_day}}</div>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col key="week" :span="col_span">
                            <span class="time-label">是否包括周末：</span>{{data.week}}
                        </a-col>
                        <a-col key="hand_type" :span="col_span">
                            <span class="time-label">指定数据交付时间：</span>
                            <span v-if="data.hand_type === '不指定'">{{data.hand_type}}</span>
                            <span v-else :style="{color: '#FF5151'}">{{data.hand_type}} {{data.hand_day}} 天</span>
                        </a-col>
                    </a-row>
                    <div class="calendar-display">
                        <calendar :cycleDate="cycleDate" v-on:gaveAll="gaveAll"></calendar>
                    </div>
                </div>
            </div>
        </div>

        <Task :order_id="id" :dispatch_id="data.dispatch_id" ref="task"></Task>
        <div class="device-info-wrapper">
            <Device :order_id="id" :dispatch_id="data.dispatch_id" :device_remark="data.device_remark"></Device>
        </div>
        <div class="push-info-wrapper">
            <div class="inner-info">
                <h3 class="header">六、推送列表</h3>
                <div class="form-main-content">
                    <a-table :columns="pushColumns" :dataSource="pushData" :pagination="pushPage" bordered :rowKey="record => record.id">
                        <span slot="sn" slot-scope="record">
                            <router-link :to="'/push/update/'+record.id">{{record.sn}}</router-link>
                        </span>
                    </a-table>
                </div>
            </div>
        </div>
        <div class="status-info-wrapper">
            <div class="inner-info">
                <h3 class="header">七、状态列表</h3>
                <div class="form-main-content">
                    <div class="status-table">
                        <a-table :columns="statusColumns" :dataSource="statusData" :rowKey="record => record.status" :pagination="false" bordered></a-table>
                    </div>
                </div>
            </div>
        </div>
        <!--新增航线-->
        <a-modal v-model="showaddship" title="新增航线" @ok="shipSubmit" @cancel="airLineCancel"
                 :cancelButtonProps="{ props: {type: 'primary'}}"
                 centered
                 :keyboard = 'false'
                 :maskClosable = 'false'>
            <a-form :form="form_ship">
                <a-form-item label="航线名称" :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                             :wrapperCol="{lg: {span: 16}, sm: {span: 17} }">
                    <a-input placeholder="航线名称"
                             v-decorator="['name',{rules: [{ required: true, message: '请输入航线名称' }]}]"/>
                </a-form-item>
                <a-form-item label="选择航线" :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                             :wrapperCol="{lg: {span: 16}, sm: {span: 17} }">
                    <transition name="fade">
                    <div v-if="!kmlFileName" class="kml-file-upload">
                        <a-upload :customRequest="upload" :fileList="shipFiles" :beforeUpload="beforeAirUpload"
                                  :remove="handleAirLineChange"
                                  v-decorator="['file',{rules: [{ required: true, message: '请选择文件' }]}]" accept=".kml">
                            <a-button type="primary">
                                上传
                            </a-button>
                            <div class="file-necessary" v-if="fileNecessary">请选择文件</div>
                        </a-upload>
                    </div>
                    <p class="kml-file-name" v-if="kmlFileName">{{kmlFileName}}</p>
                    </transition>
                </a-form-item>
            </a-form>
        </a-modal>
        <!--取消订单-->
        <a-modal v-model="showcancelorder" title="取消订单" @ok="cancelOrderSubmit"
                 :cancelButtonProps="{ props: {type: 'primary'}}"
                 cancelText="撤回"
                 centered
                 :keyboard = 'false'
                 :maskClosable = 'false'>
            <a-form :form="form_cancelorder">
                <a-form-item>
                    <a-textarea :rows="6" placeholder="订单取消原因"
                                v-decorator="['cancel_reason',{rules: [{ required: true, message: '请输入订单取消原因' }]}]"/>
                </a-form-item>
            </a-form>
        </a-modal>
        <a-modal v-model="showRecoverOrder" title="恢复订单" @ok="recoverOrder"
                 :cancelButtonProps="{ props: {type: 'primary'}}"
                 cancelText="取消"
                 centered
                 :keyboard = 'false'
                 :maskClosable = 'false'>
            <div class="confirm-delete-wrapper">
                <p>请确认是否恢复此订单？</p>
            </div>
        </a-modal>
        <!--订单确认前周期修改-->
        <a-modal v-model="periodedit" title="周期修改"
                 :cancelButtonProps="{ props: {type: 'primary'}}"
                 cancelText="撤回"
                 centered
                 width="800"
                 :footer="null"
                 :keyboard = 'false'
                 :maskClosable = 'false'>
            <period @getPeriod="getPeriod" :form="periodForm"></period>
        </a-modal>

    </div>
</template>

<script>
    const river = ['100', '400', '700', '1000', '1300', '1600', '1900', '2100', '2100'];

    import moment from 'moment';
    import ShowMap from "../../components/showMap";
    import Push from "../../components/push";
    import Calendar from "../../components/calendar";
    import Report from "../../components/order/report";
    import Device from './device'
    import Task from './task'
    import KmlMap from "../../components/kmlMap";
    import {getBase64} from "@/utils/ImageBase64";
    import upload from "@/components/upload";
    import ATextarea from "ant-design-vue/es/input/TextArea";
    import period from "@/components/period";
    import maps from '@/components/map'
 
    export default {
        components: {ATextarea, KmlMap, Calendar,ShowMap,Push,Device,Task,Report,upload,period,maps},
        data() {
            return {
                user_id:this.$store.getters.user_id,
                menus: [],
                id: 0,
                col_span: 8,
                form_info: this.$form.createForm(this),
                form: this.$form.createForm(this),
                form_address: this.$form.createForm(this),
                form_ship: this.$form.createForm(this),
                form_cancelorder: this.$form.createForm(this),
                labelCol: {lg: {span: 8}, sm: {span: 8}},
                wrapperCol: {lg: {span: 6}, sm: {span: 6}},
                data: [],
                cycleDate: {
                    cycle: '1',
                    cycle_day: '2019年5月14日-2019年5月14日',
                    is_week: true
                },
                innerMonths: [],
                year: moment().get('year'),
                month: moment().get('month') + 1,
                day: moment().get('date'),
                disabled: true,
                isActive: false,
                transports: [],
                showaddress: false,
                pushPage:{
                    current: 1,
                    total: 0,
                    pageSize: 5,
                    showTotal: (total) => {
                        return '共' + total + '条'
                    },
                    onChange: (page, size) => {
                        this.pushPageChange(page, size)
                    },
                },
                shipColumns: [
                    {title: "序号", scopedSlots: {customRender: "id"}, align: "center"},
                    {title: "名称", dataIndex: "name", align: "center"},
                    {title: "状态", scopedSlots: {customRender: "status"}, align: "center"},
                    {title: "操作", scopedSlots: {customRender: "action"}, align: "center"},
                ],
                pushColumns: [
                    {title: "推送编号", scopedSlots: {customRender: "sn"}, align: "center"},
                    {title: "推送类型", dataIndex: "type", align: "center"},
                    {title: "推送时间", dataIndex: "created_at", align: "center"},
                    {title: "推送发出人", dataIndex: "sender", align: "center"},
                    {title: "推送接收人", dataIndex: "receiver", align: "center"},
                    {title: "结果", dataIndex: "status", align: "center"},
                ],
                statusColumns: [
                    {title: "状态", dataIndex: "status", align: "center"},
                    {title: "状态时间", dataIndex: "time", align: "center"},
                ],
                shipData: [],
                shipShow: false,
                shipShowData: {},
                pushData: [],
                statusData: [],
                shipFiles: [],
                pushes: [],
                isShowPush: false,
                showaddship: false,
                showcancelorder: false,
                showRecoverOrder: false,
                remarkChange: false,
                show_delete: false,
                fileNecessary: false,
                delete_id: '',
                canrecoverorder:false,
                showKmlMap: false,
                kml: '',
                kmlFileName: '',
                addressedit:false,
                periodedit:false,
                river_length: '',
                addressForm:{
                    area:'',
                    address:'',
                    images:[],
                    river_width: '',
                    river_width_index: '1',
                },
                periodForm:{
                    cycle: 1,
                    cycle_unit: '天',
                    week: '1',
                    cycle_hour: '',
                    cycle_day: '',
                    hand_type: '1',
                    hand_day: '1',
                    is_urgent: '0',
                    urgent_fee:0,
                    period:1,
                    cash:0,
                    total:0,
                    deliver: '',
                },
                previewVisible: false,
                previewImage: '',
                height: '',
                showmap: false,
                imgStyle:''
            }
        },
        watch:{
            data(val){
                this.addressForm.area = val.area ? parseFloat(val.area) : 0
                this.addressForm.address = val.address
                this.periodForm.cycle = val.cycle
                this.periodForm.cycle_unit = val.cycle_unit
                this.periodForm.week = val.week
                this.periodForm.cycle_hour = val.cycle_hour
                this.periodForm.cycle_day = val.cycle_day
                this.periodForm.hand_type = val.hand_type
                this.periodForm.hand_day = val.hand_day
                this.periodForm.is_urgent = val.is_urgent
                this.periodForm.period = val.period
                this.periodForm.deliver = val.deliver
            }
        },
        computed: {
            getUnit() {
                let unitMap = {
                    '3': '平方公里',
                    '4': '个',
                    '5': '平方公里',
                }

                return unitMap[this.data.type_id]
            },
            getRiverWidth() {
                let obj = {
                    '1': '100米以内',
                    '2': '100米-400米',
                    '3': '400米-700米',
                    '4': '700米-1000米',
                    '5': '1000米-1300米',
                    '6': '1300米-1600米',
                    '7': '1600米-1900米',
                    '8': '1900米-2100米',
                    '9': '2100米以上',
                };
                return obj[this.data.river_width_index]
            },
            getRiverLength() {
                return parseFloat(this.data.length).toFixed(2)
            }
        },
        methods: {
            moment,
            riverLength(river_width, area) {
                let rl = (parseInt(river_width) + 200) / 1000;
                return parseFloat(area / rl).toFixed(2)
            },
            onChangeArea() {
                let river_length = this.form_address.getFieldValue('river_length')
                let area = this.calcRiverArea(river_length)
                this.addressForm.area = area
            },
            onSubmit(oldValues) {
                // console.log('oldValues', oldValues)
                this.form_address.validateFields((err, values) => {
                    if (!err) {
                        // console.log('values', values)
                        values = Object.assign(oldValues, values)
                        if(this.data.is_urgent == '紧急') {
                            values.cash = parseFloat(this.data.price * parseFloat(values.area) * (1+0.2)).toFixed(2);
                            values.urgent_fee = parseFloat(this.data.price * values.area * this.data.period * 0.2).toFixed(2);
                        } else {
                            values.cash = parseFloat(this.data.price * parseFloat(values.area)).toFixed(2);
                        }
                        values.is_urgent = this.data.is_urgent == '紧急' ? '1' : '0'
                        values.period = this.data.period
                        values.total = values.cash * this.data.period
                        values.river_width = river[parseInt(this.addressForm.river_width) - 1]
                        values.length = this.river_length
                        this.postData(values).then(res => {
                            if (res.id) {
                                this.$message.success(res.msg, 1);
                                this.addressedit = false
                                this.data.area = values.area
                                this.data.address = values.address
                                this.data.images = [];
                                this.data.lng_lat = oldValues.lng_lat
                                this.getDetail(this.id)
                            } else {
                                this.$message.error(res.msg, 1);
                            }
                        })
                    }
                })
            },
            changeOrderRemark() {
                this.form_info.validateFields((err, values) => {
                    if (!err) {
                        this.postData(values).then(res => {
                            if (res.id) {
                                this.$message.success(res.msg, 1);
                                this.remarkChange = false;
                                this.data = {...this.data, ...values};
                            } else {
                                this.$message.error(res.msg, 1);
                            }
                        })
                    }
                })
            },
            edit() {//修改订单
                this.disabled = false
                let that = this
                setTimeout(() => {
                    that.form.setFieldsValue({
                        transport_id: that.data.transport_id,
                        plate_number: that.data.plate_number
                    })
                }, 200)

            },
            returned() {
                this.form_info.resetFields()
            },
            pushPageChange(page,size){
                this.pushPage.current = page
                this.getPush()
            },
            showCancelOrder(){
                let hadTask = false
                this.$refs.task.data.map(i=>{
                    if(![0,6,7].includes(i.status_id)){
                         hadTask = true
                    }
                })
                if(hadTask){
                    this.$message.warning('请先关闭所有已部署的任务')
                    return false
                }
                this.showcancelorder = true
            },
            cancelOrderSubmit() {//取消订单原因填写并提交
                this.form_cancelorder.validateFields((err, values) => {
                    if (!err) {
                        values.order_id = this.id
                        this.http('post', 'push/create', values).then(res => {
                            this.getDetail(this.id)
                            this.showcancelorder = false
                        })
                    }
                })
            },
            recoverOrder(){
                this.http('get', 'push/cancel', {order_id: this.id}).then(res => {
                    this.showRecoverOrder = false;
                    this.getDetail(this.id)
                })
            },
            changeAirStatus(data) {
                this.shipShow = true;
                this.shipShowData = data;
            },
            shipStatus(data) {//修改航线状态
                this.http("put", "order-ship/update?id=" + this.shipShowData.id).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg, 1);
                        this.getDetail(this.id);
                        this.shipShow = false;
                    } else {
                        this.$message.error(res.msg, 1);
                    }
                })
            },
            tpChange(v) {//修改出行方式
                this.data.transport_id = v
            },
            showAddShip() {//显示添加航线
                this.showaddship = true
            },
            airLineCancel() {
                this.form_ship.resetFields();
                this.shipFiles = [];
                this.fileNecessary = false;
                this.kmlFileName = '';
            },
            showAddress() {//显示地图
                this.showaddress = true
            },
            beforeAirUpload(file) {
                let fileInfo = file.name.split('.');
                const typeB = fileInfo[fileInfo.length - 1] === "kml";
                if (!typeB) {
                    this.$message.error("请选择kml格式的图片", 1);
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error("图片大小必须小于2MB!", 1);
                }
                if (typeB && isLt2M) {
                    if (!this.form_ship.getFieldValue('name')) {
                        this.form_ship.setFieldsValue({'name': file.name.substring(0, file.name.indexOf('.'))})
                    }
                }
                return typeB && isLt2M;
            },
            upload(file) {//上传航线文件
                getBase64(file.file, base64 => {
                    this.http("post", "upload/upload", {image: base64.replace(/octet-stream/g, 'kml')}).then(res => {
                        this.shipFiles = [{uid: 0, name: res.url, url: res.imgurl}];
                        this.fileNecessary = false;
                    });
                });
                this.kmlFileName = file.file.name
            },
            handleAirLineChange() {
                this.kmlFileName = '';
                this.shipFiles = this.shipFiles.filter(item => {
                    return item.status !== 'removed'
                });
            },
            async postData(param) {//修改订单
                return await this.http('put', 'orders/update?id=' + this.id, param);
            },
            async getDetail(id) {
                let data = await this.http('get', 'orders/view', {id: id});
                await setTimeout(() => {
                    this.getPushData(data.id);
                }, 800);
                this.$refs.task.getList()
                data.transport_id = String(data.transport_id)
                this.transports = data.transports
                this.shipData = data.ships.data
                this.statusData = data.statuses
                this.data = data;

                this.cycleDate['cycle'] = data.cycle
                this.cycleDate['cycle_day'] = data.cycle_day
                this.cycleDate['is_week'] = data.week === '是'

                this.river_length = parseFloat(this.data.length).toFixed(2)
                this.addressForm.river_width_index = data.river_width_index
            },
            delShip(id) {//删除航线
                this.show_delete = true;
                this.delete_id = id;
            },
            handleDelete() {
                let that = this;
                that.http("delete", "order-ship/delete", {id: this.delete_id}).then(res => {
                    if (res.status == "success") {
                        that.$message.success(res.msg, 1);
                        this.show_delete = false;
                        this.getDetail(this.id);
                    } else {
                        that.$message.error(res.msg, 1);
                    }
                })
            },
            shipSubmit() {//添加航线提交
                this.form_ship.validateFields((err, values) => {
                    if (!err) {
                        if (this.shipFiles.length <= 0) {
                            this.fileNecessary = true;
                            return;
                        }
                        values.file = this.shipFiles[0].name
                        values.order_id = this.id;
                        this.http('post', 'order-ship/create', values).then(res => {
                            if (res.id) {
                                this.$message.success(res.msg, 1);
                                this.getDetail(this.id);
                                this.airLineCancel();
                                this.showaddship = false;
                                this.kmlFileName = '';
                            } else {
                                this.$message.error(res.msg, 1);
                            }
                        })
                    }
                })
            },
            transportSubmit() {//修改出行方式提交
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.postData(values).then(res => {
                            if (res.id) {
                                this.$message.success(res.msg, 1);
                                this.getDetail(this.id)
                                this.disabled = true
                            } else {
                                this.$message.error(res.msg, 1);
                            }
                        })
                    }
                })
            },
            getPush(params) {//获取推送列表
                this.http('get', 'push/index', Object.assign({order_id: this.id, page_size: this.pushPage.pageSize,page:this.pushPage.current,order:1}, params)).then(res => {
                    this.pushData = res.data
                    this.pushData.total = res.total_count
                })
            },
            async getPushData(id) {
                await this.http('get', 'push/index', {order_id: id, status: 0,order:1}).then(res => {
                    this.pushes = res.data;
                    if (this.pushes.length > 0) {
                        this.isShowPush = true;
                    } else {
                        this.isShowPush = false;
                    }

                    this.$nextTick(function () {
                        if (this.isShowPush) {
                            this.height = this.$refs.push.offsetHeight
                        } else {
                            this.height = 0
                        }
                    });
                });
            },
            editAddressDescription () {
                this.addressedit = true;
                this.addressForm.address = this.data.address
                this.addressForm.area = this.data.area ? parseFloat(this.data.area) : 0
            },
            returnedAddressForm() {
                this.form_address.resetFields()
            },
            getImages(val){
                this.addressForm.images = val
            },
            getPeriod(val){
                this.periodForm = {...this.periodForm,...val}
                this.periodForm.hand_day = '' + this.periodForm.time_count
                if(this.periodForm.is_urgent ==1){
                    this.periodForm.cash = parseFloat(this.data.price * this.addressForm.area*(1+0.2)).toFixed(2);
                    this.periodForm.urgent_fee = parseFloat(this.data.price * this.addressForm.area*this.periodForm.period * 0.2).toFixed(2);
                }else{
                    this.periodForm.cash = parseFloat(this.data.price * this.addressForm.area).toFixed(2);
                }

                this.periodForm.total = parseFloat(this.periodForm.cash * this.periodForm.period).toFixed(2)
                this.http('put', 'orders/update?id='+this.id, this.periodForm).then(async res => {
                    this.periodedit = false;
                    await this.getDetail(this.id)

                    let spans = document.querySelector('.calendar-table table').querySelectorAll('span');
                    spans.forEach(val => {
                        this.clearBackground(val)
                    });
                    this.innerMonths = document.querySelectorAll('.active-period');
                    this.periodsPart();
                })
            },
            handleCancelPreview() {
                this.previewVisible = false
            },
            close(){
                this.imgStyle= 'transform: scale(0);'
                var _this = this
                setTimeout(()=>{
                    _this.previewVisible = false
                },200)
            },
            handlePreview(file) {
                this.previewImage = file
                this.previewVisible = true
                var _this = this
                setTimeout(()=>{
                    _this.imgStyle = 'transform: scale(1);'
                },50)
            },
            clearBackground(element) {
                element.setAttribute('title', '');
                element.style.background = '';
                element.style.borderRadius = 0
            },
            periodsPart() {
                let temp = [];

                let activeDayArr = this.cycleDate.cycle_day.split('-');
                let firstDay = activeDayArr[0];
                let lastDay = activeDayArr[1];

                let time = firstDay;
                while (moment(time, 'YYYY年MM月DD日').valueOf() <= moment(lastDay, 'YYYY年MM月DD日').valueOf()) {
                    if (moment(time, 'YYYY年MM月DD日').get('day') == 0 || moment(time, 'YYYY年MM月DD日').get('day') == 6) {
                        if (!this.cycleDate.is_week) {
                            time = moment(time, 'YYYY年MM月DD日').add(1, 'days').format('YYYY年MM月DD日');
                            continue
                        } else {
                            temp.push(time)
                        }
                    } else {
                        temp.push(time)
                    }

                    time = moment(time, 'YYYY年MM月DD日').add(1, 'days').format('YYYY年MM月DD日');
                }

                let periodCount = 1;
                switch (this.data.cycle_unit) {
                    case '天':
                        periodCount = this.data.cycle;
                        break;
                    case '周':
                        periodCount = this.data.cycle * 7;
                        break;
                    case '月':
                        periodCount = this.data.cycle * 30;
                        break;
                    default:
                        break
                }
                let selectArr = this.toTwoDimension(temp, periodCount);
                this.selectDates(selectArr, this.innerMonths)
            },
            toTwoDimension(arr, n) {
                if (!Array.isArray(arr) || arr.length === 0) {
                    return []
                }

                let tem = [],
                    size = arr.length,
                    count = Math.floor((size - 1) / n) + 1

                while (count--) {
                    tem.unshift(arr.slice(count * n, (count + 1) * n))
                }

                let obj = {};
                let turnArr = [];

                let newTem = tem.filter(item => {
                    return item.length === n
                });

                newTem.forEach((val, k) => {
                    obj = {
                        'start': moment(val[0], 'YYYY年MM月DD日').format('YYYY-MM-DD'),
                        'end': moment(val[val.length - 1], 'YYYY年MM月DD日').format('YYYY-MM-DD'),
                        'period_order': k + 1
                    };
                    turnArr.push(obj);
                });
                return turnArr;
            },
            selectDates(selectArr, allMonths) {
                let startSelect, stopSelect;
                let innerMonthAll = Array.from(allMonths);

                selectArr.forEach((value, index) => {
                    if (moment(value['start']).year() === moment(value['end']).year()) {
                        if ((moment(value['start']).month() + 1) === this.month
                            && (moment(value['end']).month() + 1) === this.month
                            && moment(value['start']).year() === this.year) {
                            startSelect = moment(value['start']).date() - 1;
                            stopSelect = moment(value['end']).date() - 1;

                            let temp = moment(value['start']);
                            for (let i = startSelect; i <= stopSelect; i++) {
                                if (!this.cycleDate.is_week) {
                                    if (moment(temp, 'YYYY-MM-DD').get('day') === 0 || moment(temp, 'YYYY-MM-DD').get('day') === 6) {
                                        temp = moment(temp).add(1, 'days');
                                        continue
                                    }
                                }
                                if (startSelect === stopSelect) {
                                    this.changeBackground(innerMonthAll[i], value['period_order'], 2, '10px')
                                } else {
                                    if (i === startSelect) {
                                        this.changeBackground(innerMonthAll[i], value['period_order'], 1, '10px 0 0 10px')
                                    } else if (i === stopSelect) {
                                        this.changeBackground(innerMonthAll[i], value['period_order'], 3, '0 10px 10px 0')
                                    } else {
                                        this.changeBackground(innerMonthAll[i], value['period_order'], 2)
                                    }
                                }
                                temp = moment(temp).add(1, 'days')
                            }
                        } else if ((moment(value['start']).month() + 1) === this.month
                            && (moment(value['end']).month() + 1) > this.month
                            && moment(value['start']).year() === this.year) {
                            startSelect = moment(value['start']).date() - 1;
                            stopSelect = moment(value['start']).endOf('month').date() - 1;
                            let temp = moment(value['start']);
                            for (let i = startSelect; i <= stopSelect; i++) {
                                if (!this.cycleDate.is_week) {
                                    if (moment(temp, 'YYYY-MM-DD').get('day') === 0 || moment(temp, 'YYYY-MM-DD').get('day') === 6) {
                                        temp = moment(temp).add(1, 'days');
                                        continue
                                    }
                                }
                                if (i === startSelect) {
                                    this.changeBackground(innerMonthAll[i], value['period_order'], 1, '10px 0 0 10px')
                                } else {
                                    this.changeBackground(innerMonthAll[i], value['period_order'], 2)
                                }
                                temp = moment(temp).add(1, 'days')
                            }
                        } else if ((moment(value['start']).month() + 1) < this.month
                            && (moment(value['end']).month() + 1) === this.month
                            && moment(value['start']).year() === this.year) {
                            startSelect = moment(value['end']).startOf('month').date() - 1;
                            stopSelect = moment(value['end']).date() - 1;
                            let temp = moment(this.year + '-' + this.month + '-' + '01', 'YYYY-M-DD');
                            for (let i = startSelect; i <= stopSelect; i++) {
                                if (!this.cycleDate.is_week) {
                                    if (moment(temp, 'YYYY-MM-DD').get('day') === 0 || moment(temp, 'YYYY-MM-DD').get('day') === 6) {
                                        temp = moment(temp).add(1, 'days');
                                        continue
                                    }
                                }
                                if (i === stopSelect) {
                                    this.changeBackground(innerMonthAll[i], value['period_order'], 3, '0 10px 10px 0')
                                } else {
                                    this.changeBackground(innerMonthAll[i], value['period_order'], 2)
                                }
                                temp = moment(temp).add(1, 'days')
                            }
                        } else if ((moment(value['start']).month() + 1) < this.month
                            && (moment(value['end']).month() + 1) > this.month
                            && moment(value['start']).year() === this.year) {
                            stopSelect = moment(this.year + '-' + this.month + '-01', 'YYYY-M-DD').daysInMonth() - 1;

                            let temp = moment(this.year + '-' + this.month + '-' + '01', 'YYYY-M-DD');
                            for (let i = 0; i <= stopSelect; i++) {
                                if (!this.cycleDate.is_week) {
                                    if (moment(temp, 'YYYY-MM-DD').get('day') === 0 || moment(temp, 'YYYY-MM-DD').get('day') === 6) {
                                        temp = moment(temp).add(1, 'days');
                                        continue
                                    }
                                }
                                this.changeBackground(innerMonthAll[i], value['period_order'], 2)
                                temp = moment(temp).add(1, 'days')
                            }
                        }
                    } else if (moment(value['end']).year() > this.year && moment(value['start']).year() === this.year) {
                        if ((moment(value['start']).month() + 1) === this.month) {
                            startSelect = moment(value['start']).date() - 1;
                            stopSelect = moment(value['start']).endOf('month').date() - 1;
                            let temp = moment(value['start']);
                            for (let i = startSelect; i <= stopSelect; i++) {
                                if (!this.cycleDate.is_week) {
                                    if (moment(temp, 'YYYY-MM-DD').get('day') === 0 || moment(temp, 'YYYY-MM-DD').get('day') === 6) {
                                        temp = moment(temp).add(1, 'days');
                                        continue
                                    }
                                }
                                if (i === startSelect) {
                                    this.changeBackground(innerMonthAll[i], value['period_order'], 1, '10px 0 0 10px')
                                } else {
                                    this.changeBackground(innerMonthAll[i], value['period_order'], 2)
                                }
                                temp = moment(temp).add(1, 'days')
                            }
                        } else if ((moment(value['start']).month() + 1) < this.month) {
                            stopSelect = moment(this.year + '-' + this.month + '-01', 'YYYY-M-DD').daysInMonth() - 1;

                            let temp = moment(this.year + '-' + this.month + '-' + '01', 'YYYY-M-DD');
                            for (let i = 0; i <= stopSelect; i++) {
                                if (!this.cycleDate.is_week) {
                                    if (moment(temp, 'YYYY-MM-DD').get('day') === 0 || moment(temp, 'YYYY-MM-DD').get('day') === 6) {
                                        temp = moment(temp).add(1, 'days');
                                        continue
                                    }
                                }
                                this.changeBackground(innerMonthAll[i], value['period_order'], 2)
                                temp = moment(temp).add(1, 'days')
                            }
                        }
                    } else if (moment(value['end']).year() === this.year && moment(value['start']).year() < this.year) {
                        if ((moment(value['end']).month() + 1) === this.month) {
                            startSelect = moment(value['end']).startOf('month').date() - 1;
                            stopSelect = moment(value['end']).date() - 1;
                            let temp = moment(this.year + '-' + this.month + '-' + '01', 'YYYY-M-DD');
                            for (let i = startSelect; i <= stopSelect; i++) {
                                if (!this.cycleDate.is_week) {
                                    if (moment(temp, 'YYYY-MM-DD').get('day') === 0 || moment(temp, 'YYYY-MM-DD').get('day') === 6) {
                                        temp = moment(temp).add(1, 'days');
                                        continue
                                    }
                                }
                                if (i === stopSelect) {
                                    this.changeBackground(innerMonthAll[i], value['period_order'], 3, '0 10px 10px 0')
                                } else {
                                    this.changeBackground(innerMonthAll[i], value['period_order'], 2)
                                }
                                temp = moment(temp).add(1, 'days')
                            }
                        } else if ((moment(value['end']).month() + 1) > this.month) {
                            stopSelect = moment(this.year + '-' + this.month + '-01', 'YYYY-M-DD').daysInMonth() - 1;

                            let temp = moment(this.year + '-' + this.month + '-' + '01', 'YYYY-M-DD');
                            for (let i = 0; i <= stopSelect; i++) {
                                if (!this.cycleDate.is_week) {
                                    if (moment(temp, 'YYYY-MM-DD').get('day') === 0 || moment(temp, 'YYYY-MM-DD').get('day') === 6) {
                                        temp = moment(temp).add(1, 'days');
                                        continue
                                    }
                                }
                                this.changeBackground(innerMonthAll[i], value['period_order'], 2)
                                temp = moment(temp).add(1, 'days')
                            }
                        }
                    }
                })
            },
            changeBackground(element, title, index, radius) {
                element.setAttribute('title', '第' + title + '周期');
                element.style.background = '#293B4E';
                element.style.borderRadius = radius
            },
            gaveAll(args) {
                this.innerMonths = args[0];
                this.month = args[1];
                this.year = args[2];
                this.periodsPart()
            },
            showKmlMapContent(kml) {
                this.kml = kml;
                this.showKmlMap = true
            },
            showMap(id) {
                this.showmap = true;
            },
            calcRiverArea(area) {
                let river_width_index = this.form_address.getFieldValue('river_width_index')
                let lineHeight = 0;
                switch (river_width_index) {
                    case '1':
                        lineHeight = (100 + 200) / 1000
                        break;
                    case '2':
                        lineHeight = (400 + 200) / 1000
                        break;
                    case '3':
                        lineHeight = (700 + 200) / 1000
                        break;
                    case '4':
                        lineHeight = (1000 + 200) / 1000
                        break;
                    case '5':
                        lineHeight = (1300 + 200) / 1000
                        break;
                    case '6':
                        lineHeight = (1600 + 200) / 1000
                        break;
                    case '7':
                        lineHeight = (1900 + 200) / 1000
                        break;
                    case '8':
                    case '9':
                        lineHeight = (2100 + 200) / 1000
                        break;
                }
                return area * lineHeight !== 0 ? (area * lineHeight).toFixed(2) : 0
            },
            getArea(data) {
                let area = data;
                if(this.data.type_id == 5) {
                    area = this.calcRiverArea(area)
                }
                console.log('area', area)
                this.form_address.setFieldsValue({
                    'area': area
                })
                console.log(this.form_address.getFieldsValue())
                this.addressForm.area = area
                this.showmap = false
            },
            getLnglat(data) {
                console.log('lng_lat', data)
                this.addressForm.lng_lat = data
                // this.form_address.setFieldsValue({
                //     'lng_lat': data
                // })
            },
            getLength(data) {
                console.log('river_length', data)
                this.form_address.setFieldsValue({
                    'river_length': data
                })
            },
            getLocations(data) {
                console.log('address', data)
                this.form_address.setFieldsValue({
                    'address': data
                })
            },
        },
        async created() {
            this.id = this.$route.params.id;
            await this.getDetail(this.id);
            this.getPush();
            this.innerMonths = document.querySelectorAll('.active-period');
            this.periodsPart()
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../assets/scss/mixin";

    .icon > .anticon {
        font-size: 24px;
    }

    .integral-wrapper {
        width: 100%;
        @include centering;
        & > div {
            p + p {
                margin-top: 10px;
            }
            & > div {
                margin-top: 20px;
                img + img {
                    margin-left: 10px;
                }
            }
        }
    }

    .task-operate-container {
        a {
            display: block;
        }
    }

    .is-between {
        .active-period {
            display: block;
            line-height: 25px;
        }
    }

    .file-necessary {
        color: #f5222d;
        position: absolute;
        top: 32px;
        width: 100px;
    }

    .confirm-wrapper {
        width: 100%;
    }

    .confirm-delete-wrapper {
        width: 100%;
        padding: 20px;
        text-align: center;
        p {
            font-size: 16px;
        }
    }

    .header {
        @include fj();
        margin-bottom: 20px;
        .operate {
            .ant-btn + .ant-btn {
                margin-left: 40px;
            }
        }
    }

    .order-wrapper {
        margin-left: -24px;
        margin-right: -24px;
        position: relative;
        transition: padding-top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        .push-wrapper {
            position: absolute;
            z-index: 1;
            top: 0;
            width: 100%;
            margin-top: -24px;
            margin-bottom: 24px;
            background: #293043;
        }
        .basic-info-wrapper {
            border-bottom: 1px solid #1E2026;
            padding-bottom: 20px;
            margin-bottom: 20px;
            .inner-info {
                padding-left: 24px;
                padding-right: 24px;
            }
        }
        .report-info-wrapper {
            border-bottom: 1px solid #1E2026;
            padding-bottom: 20px;
            margin-bottom: 20px;
            .inner-info {
                padding-left: 24px;
                padding-right: 24px;
            }
        }
        .address-info-wrapper {
            border-bottom: 1px solid #1E2026;
            padding-bottom: 20px;
            margin-bottom: 20px;
            .inner-info {
                padding-left: 24px;
                padding-right: 24px;
                .address-a {
                    margin-bottom: 18px;
                    .textarea-desc {
                        @include fj(flex-start);
                        align-items: center;
                        & > div {
                            flex: 1;
                            display: flex;
                            align-items: center;
                        }
                    }
                    .prefix-name {
                        font-size: 0.925rem;
                    }
                    .address-show {
                        cursor: pointer;
                    }
                    & > div + div {
                        margin-top: 18px;
                    }
                    .fly-map {
                        & > img {
                            margin-left: 10px;
                        }
                    }
                }
                .header {
                    & > div {
                        margin-right: 18px;
                    }
                }
                .address-b {
                    margin-bottom: 25px;
                    @include fj()
                }
                .form-main-content {
                    table .operate-column {
                        @include fj(space-around)
                    }
                    .relate-image {
                        display: block;
                        margin-bottom: 8px;
                    }
                    .img-displayed {
                        img + img {
                            margin-left: 10px;
                        }
                    }
                    .img-view {
                        @include wh(100px, 100px);
                        cursor: pointer;
                    }
                }
            }
        }
        .time-info-wrapper {
            border-bottom: 1px solid #1E2026;
            padding-bottom: 20px;
            margin-bottom: 20px;
            .inner-info {
                padding-left: 24px;
                padding-right: 24px;
                .form-main-content {
                    .constant-time-detail {
                        @include fj(flex-start);
                        & > span {
                            white-space: nowrap;
                        }
                    }
                }
                .header {
                    & > div {
                        margin-right: 18px;
                    }
                }
                .calendar-display {
                    margin-top: 30px;
                    margin-left: auto;
                    margin-right: auto;
                    width: 85%;
                }
            }
            .time-label {
                font-size: 0.925rem;
            }
        }

        .device-info-wrapper {
            border-bottom: 1px solid #1E2026;
            padding-bottom: 20px;
            margin-bottom: 20px;
            .inner-info {
                padding-left: 24px;
                padding-right: 24px;
                .header {
                    @include fj(space-between);
                    margin-bottom: 20px;
                }
            }
        }
        .push-info-wrapper {
            border-bottom: 1px solid #1E2026;
            padding-bottom: 20px;
            margin-bottom: 20px;
            .inner-info {
                padding-left: 24px;
                padding-right: 24px;
            }
        }
        .status-info-wrapper {
            padding-bottom: 20px;
            margin-bottom: 20px;
            .inner-info {
                padding-left: 24px;
                padding-right: 24px;
                & > .form-main-content {
                    & > .status-table {
                        width: 60%;
                    }
                }
            }
        }
    }

    #update-form {
        position: relative;
        @include transition(padding-bottom, .3s, cubic-bezier(0.645, 0.045, 0.355, 1));
        &.active {
            padding-bottom: 490px;
        }
        .more-info-img {
            position: relative;
            transform-origin:center center;
            left: 6px;
            @include transition(transform, .3s, cubic-bezier(0.645, 0.045, 0.355, 1));
            &.active {
                transform: rotate(-180deg);
                -webkit-transform: rotate(-180deg);
                -moz-transform: rotate(-180deg);
                -ms-transform: rotate(-180deg);
                -o-transform: rotate(-180deg);
            }
        }

        .extra-info {
            position: absolute;
            width: 100%;
            margin-top: 0;
            height: 0;
            visibility: hidden;
            opacity: 0;
            @include transition(all, .3s, cubic-bezier(0.645, 0.045, 0.355, 1));
            &.active {
                padding-top: 20px;
                margin-top: 10px;
                height: 470px;
                opacity: 1;
                visibility: visible;
                z-index: 1;
            }
            .extra-info-form {
                border: 1px solid #000;
                padding-top: 20px;
                padding-bottom: 20px;
                padding-left: 50px;
                margin-right: 20px;
            }
            .change-more-information {
                margin-right: 50px;
                @include fj(flex-end);
            }
        }
    }
    .slide-fade-enter-active {
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    .slide-fade-leave-active {
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateY(-40px);
        opacity: 0;
    }

    .kml-file-name {
        width: 200px;
        position: absolute;
    }

    .kml-file-upload {
        position: absolute;
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: all .2s linear;
    }

    .fade-enter, .fade-leave-to{
        transform: translateY(5px);
        opacity: 0;
    }
    .shadeMap{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9999;
        overflow: scroll;
        .popUpImg{
            display: flex;
            margin-top: 150px;
            transform: scale(0);
            transition: .5s;
            .img{
                position: relative;
                background: #1E2026;
                margin: auto;
                padding: 25px;
                max-width: 95%;
                .shut{
                    position: absolute;
                    top:0px;
                    right: 0px;
                    width: 40px;
                    height: 40px;
                    font-size: 18px;
                    text-align: center;
                    line-height: 40px;
                    z-index: 999;
                    cursor: pointer;
                    color: #C8D0E9;
                }
                .shut:hover{
                    color: #fff;
                }
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
</style>
